<template>
  <view class="container">
    <!-- 导航 -->
    <custom-nav theme="primary"></custom-nav>

    <view class="content">
      <scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-isRefresh="isRefresh" refresher-background="transparent" :refresher-threshold="100"
        :scroll-with-animation="true" @refresherrefresh="onRefresh" @refresherrestore="onRestore" :refresher-triggered="isRefresh">
        <!-- 次数卡片 -->
        <top-card :nums="myInfo.nums"></top-card>

        <!-- 资料卡片 -->
        <my-card :info="myInfo" :imgList="imgList" v-if="myInfo.appLogin && myInfo.phone"></my-card>

        <!-- 提示卡片 -->
        <tips-card v-else></tips-card>

        <!-- 计数卡片 -->
        <count-card :info="myInfo"></count-card>

        <!-- 配置卡片 -->
        <view style="padding-bottom: 20rpx">
          <list-card :info="myInfo"></list-card>
        </view>
      </scroll-view>
    </view>

  </view>
</template> 

<script setup>
// 引入组件
import TipsCard from "@/components/common/tips-card.vue";
import TopCard from "./components/top-card.vue";
import CountCard from "./components/count-card.vue";
import ListCard from "./components/list-card.vue";
import MyCard from "./components/my-card.vue";
// 引入api
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { app, common } = useStore();

// data
const myInfo = ref({});
const imgList = ref([]);
const isRefresh = ref(false);

const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const onRefresh = () => {
  isRefresh.value = true;
  getInfo();
};

const getImgs = (imgs) => {
  const list = [
    {
      picObj: {},
      tips: "孩子正面照",
      icon: "upload",
    },
    {
      picObj: {},
    },
    {
      picObj: {},
    },
  ];
  if (imgs?.length) {
    list.forEach((item, index) => {
      if (imgs[index]) {
        item.picObj = imgs[index];
      } else {
        item.picObj = {};
      }
    });
  }
  imgList.value = list;
};

// 获取个人信息
const getInfo = () => {
  app
    .getUserInfo()
    .then((res) => {
      isRefresh.value = false;
      myInfo.value = res;
      const { appLogin, phone, imgs } = res;
      if (!appLogin) return;
      if (!phone) return;

      getImgs(imgs);
    })
    .catch((err) => {
      isRefresh.value = false;
      myInfo.value = {};
    });
};

onShow(() => {
  getInfo();
});
provide("pageType", "my");
provide("fatherFn", { confirmFn: getInfo });
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  .content {
    background: transparent;
  }
}
</style>
